import React from "react";
import { Card, Space } from "antd";

import LoginSvg from "src/public/imgs/login.svg";
import bgLeft from "src/public/imgs/bg-left.png";
import bgRight from "src/public/imgs/bg-right.png";

import globalStyles from "src/public/css/index.scss";
import styles from "./index.scss";

const UserInfo: React.FC = (props) => (
  <div className={`${(globalStyles as any).minHeight} ${(styles as any).root}`}>
    <div
      className={(globalStyles as any).bgLeft}
      style={{ backgroundImage: `url(${bgLeft})` }}
    />
    <div
      className={(globalStyles as any).bgRight}
      style={{ backgroundImage: `url(${bgRight})` }}
    />

    <div className={(globalStyles as any).verticallyCentered}>
      <Card className={(styles as any).card}>
        <Space>
          <div className={(styles as any).img}>
            <img
              src={LoginSvg}
              alt=""
              className={(globalStyles as any).verticallyCentered}
              style={{ width: 500 }}
            />
          </div>
          {props.children}
        </Space>
      </Card>
    </div>
  </div>
);

export default UserInfo;
